<template lang="pug">
    .report
      .title 我的上报记录
      table
        tr
          - var ths = ' 上报信息 上报时间 当前状况 处置建议 操作'.split(' ')
          each i in ths
            th= i
        tr(v-for='(item,index) in list' :key='index')
          td {{index+1}}
          td(@click="getdetail(item)" )
            div.subtitle(v-html="filterTitle(item.popularfeelingsTitle)")
          td {{item.createTime}}
          td {{rs[item.reportstatus]}}
          td {{item.popularfeelingsOpinion}}
          td.edit 
            el-button.btn(@click="showcancelreport(item)") 取消上报
      .pagination
        el-pagination(
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[100, 80, 50, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total")
      .popup(v-show="reporterr")
        .body
          .p-title 取消上报 
          .cont.err 对不起您的这条舆情领导已经审阅,
            div 无法取消~
          .choose
            el-button(type="primary" @click="reporterr = false") 知道了~
          .close(@click="reporterr = false")
      .popup(v-show="cancelreport")
        .body
          .p-title 取消上报 
          .cont 确定要取消上报这条舆情吗
          .choose
            el-button(type="primary" @click="cancelPublish(lsitem)") 确定
            el-button(@click="cancelreport = false") 取消
          .close(@click="cancelreport = false")
</template>
<script>
let rs = {0:'已取消',1:'正在上报',2:'领导已审阅'}
export default {
  name:'report',
  data(){
    return{
      lsitem:[],
      currentPage1:1,
      total:0,
      pageSize:30,
      list:[],
      rs,
      cancelreport:false,
      reporterr:false
    }
  },
  mounted(){
    this.query()
  },
  methods:{
    filterTitle(item){
      return item.replace(/<br\/>/g, '').replace(/{{{/g,"<span class='light' style='color:red'>").replace(/}}}/g,"</span>")
    },
    async query(){
      let res = await this.$http.post('vrv-monitor-platform-web/popularfeelingsDispose/query',{
        pageNum:this.currentPage1,
        pageSize:this.pageSize
      })
      this.list = res.body.data
      this.total = res.body.total
      this.pageSize = res.body.size
      this.list = this.list.map(d => {
        let reportstatus
        if(d.popularfeelingsPublish == 0){
          reportstatus = 0
        }else if(d.popularfeelingsPublish ==1&& d.popularfeelingsStatus==0){
          reportstatus = 1
        }else if(d.popularfeelingsPublish ==1&& d.popularfeelingsStatus==1){
          reportstatus = 2
        }
        return {
          reportstatus:reportstatus,
          ...d
        }
      })
    },
    showcancelreport(item){
      if(parseInt(item.popularfeelingsStatus) == 1){
        this.reporterr = true
        return 
      }
      this.cancelreport = true
      this.lsitem = item

    },
    async cancelPublish(item){
      let res = await this.$http.post('vrv-monitor-platform-web/popularfeelingsDispose/cancelPublish',{
        popularfeelingsId:item.popularfeelingsId
      })
      if(res.body.success == true){
        this.$message.success('取消成功')
        this.cancelreport = false
        this.query()
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
		},
    handleCurrentChange(val){
      this.currentPage1 = val
      this.query()
    },
    getdetail(item){
      this.$store.dispatch('queryarticle',{
        id:item.popularfeelingsId,
      });
    }
  }
}
</script>
<style lang="stylus" scoped>
  .report
    min-height 100%
    background #fff
    padding 8px 0
    margin-right: 1.7rem;
    .title
      height 60px
      margin 0 30px
      line-height 60px
      font-size 21px
      color #555
      font-weight bold
      border-bottom 1px solid #dcdcdc
    table  
      width 100%
      border-collapse collapse
      th  
        height 55px
        text-align center
        font-size 14px
        color #535353
        border-bottom 1px solid #dcdcdc
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      td  
        height 60px
        font-size 14px 
        color #000
        text-align center
        border-bottom 1px solid #dcdcdc
        &.edit
          border-left 1px solid #dcdcdc
        &:first-of-type
          padding-left 50px
          text-align left 
        &:nth-child(-n+2)
          padding-left 50px
          text-align left 
          cursor pointer
        .subtitle
          margin 0 auto
          width 120px
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
        .btn
          width 100px
          height 40px
    .pagination
      padding 20px
      text-align right 
.popup
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.5)
  .body
    position absolute
    top 50%
    left 50%
    margin-top -120px
    margin-left -190px
    width 380px
    height 240px
    background #fff
    .p-title
      height 60px
      text-indent  26px
      font-size 18px
      color #666666
      padding 0
      line-height 60px
      border-bottom 1px solid rgba(231, 232, 232, 1);
    .cont
      padding 25px 48px 65px
      text-align center
      font-size 14px
      color  #333333
      &.err
        padding-bottom 48px
    .choose
      padding 0 48px
      text-align right 
      >div
        box-sizing border-box
        width 100px
        height 40px
        border-radius 5px 5px 5px 5px
        font-size 18px
        color #ffffff
        line-height 40px
        display inline-block
        cursor pointer
        &.save
          background-color rgba(2, 103, 207, 1)
          margin-right 40px
        &.know
          background-color rgba(2, 103, 207, 1)
        &.cancel
          background-color rgba(235, 97, 0, 1)
    .close
      position absolute
      right 22px
      top 19px
      width 17px
      height 17px
      background url('img/close.png') no-repeat
      background-size cover 
      cursor pointer

</style>


